<template>
  <div class="doms">
    <img src="@/assets/login.jpg" alt="" id="bg">
    <div class="login">
      <div class="title">用户登录</div>
      <el-form :model="userLoginParams" style="width: 350px;height: 100px;" :rules="rules" ref="ruleform">
        <el-form-item label="账号" style="height: 40px" prop="userAccount">
          <el-input v-model="userLoginParams.username" style="height: 40px" :prefix-icon="User"
            placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" style="height: 40px" prop="userPassword">
          <el-input v-model="userLoginParams.password" style="height: 40px" type="password" show-password="true"
            :prefix-icon="Lock" placeholder="请输入密码" />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button style="width:350px;height: 40px;" type="primary" @click="login"
          :disabled="!(validAc && validPd)">登录</el-button>
        <!-- <el-button style="width:350px;height: 40px; margin-left: 0px;" type="primary" @click="gotoRegister">注册</el-button> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { Lock, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, toRaw } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { reqUserLogin } from '../../api/user';

const $router = useRouter()
const $route = useRoute()
// el-form引用
const ruleform = ref()
// 数据验证结果
let validAc = ref(false)
let validPd = ref(false)
// 表单数据
let userLoginParams = reactive({
  username: "",
  password: ""
})
// 注册页面(暂不提供窗口)
const gotoRegister = () => {
  $router.replace('/user/register')
}
// 表单收集项账户输入验证
const validatorAccount = (rule, value, callBack) => {
  const reg = /^[a-zA-Z0-9_@]{4,12}$/;
  if (reg.test(value)) {
    validAc.value = true
    callBack();
  }
  else if (value.length < 4) {
    validAc.value = false
    callBack(new Error('账号过短'))
  }
  else if (value.length > 12) {
    validAc.value = false
    callBack(new Error('账号过长'))
  }
  else {
    validAc.value = false
    callBack(new Error('请输入正确的账号(只能包含数字/字母/@/_)'))
  }
}
// 登录执行
const login = async () => {
  try {
    let res=await reqUserLogin(toRaw(userLoginParams))
    switch(res){
      case 0:
        setTimeout(()=>{$router.push('/home')},1000)
        break
      case 1:
        setTimeout(()=>{$router.push('/login')},1000)
        break
      case 2:
        break
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: "登录失败 " + (error).message
    })
  }

}
// 表单收集项密码验证
const validatorPassword = (rule, value, callBack) => {
  const reg = /^[a-zA-Z0-9@]{4,12}$/;
  if (reg.test(value)) {
    validPd.value = true
    callBack();
  }
  else if (value.length < 4) {
    validPd.value = false
    callBack(new Error('密码不应少于4位'))
  }
  else if (value.length > 12) {
    validPd.value = false
    callBack(new Error('密码过长'))
  }
  else {
    validPd.value = false
    callBack(new Error('请输入正确的账号(只能包含数字/字母/@)'))
  }
}
// 验证规则
const rules = {
  userAccount: [
    { trigger: 'change', validator: validatorAccount }
  ],
  userPassword: [{ trigger: 'blur', validator: validatorPassword }]
}



</script>

<style lang="scss" scoped>
.doms {
  position: relative;
  width: 100%;
  min-width: 1920px;
  min-height: 100%;

  #bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-width: 1920px;
    min-height: 100%;
  }

  .login {
    width: 450px;
    height: 450px;
    background-color: white;
    position: relative;
    top: 25vh;
    right: -65vw;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      margin-top: 50px;
      font-size: 25px;
      margin-bottom: 50px;
      width: 450px;
      height: 25px;
      text-align: center;
    }

    .btn {
      margin-top: 20px;
      width: 450px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>